<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 10:34:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-17 09:12:55
 * @Description: 一家十一口(猜一字) 中上  重写
-->
<template>
  <div class="div1">
    <!-- <div class="toptime">
      <span>统计截至</span> <span>2020.12.31 12:00</span>
    </div> -->
    <div class="UpperMiddle">
      <div class="UpperMiddleBox">
        <!-- 日活跃用户 -->
        <div class="jishuBox">
          <div class="jishuBox_text">日活跃用户</div>
          <div class="configBox">
            <dv-digital-flop
              :config="config"
              style="width: 100%; height: 0.725rem"
            />
          </div>
          <div class="jishuBox_1">
            <div>较上日</div>
            <div class="num">78</div>
            <img class="imgs" src="../../assets/img/arrowup.png" alt="" />
          </div>
        </div>
        <!-- 月活跃用户 -->
        <div class="jishuBox">
          <div class="jishuBox_text">月活跃用户</div>
          <div class="configBox">
            <dv-digital-flop
              :config="config2"
              style="width: 100%; height: 0.725rem"
            />
          </div>
          <div class="jishuBox_1">
            <div>较上日</div>
            <div class="num">1928</div>
            <img class="imgs" src="../../assets/img/arrowup.png" alt="" />
          </div>
        </div>
        <!-- 总用户量 -->
        <div class="jishuBox">
          <div class="jishuBox_text">总用户量</div>
          <div class="configBox">
            <dv-digital-flop
              :config="config3"
              style="width: 100%; height: 0.725rem"
            />
          </div>
          <div class="jishuBox_1">
            <div>较上日</div>
            <div class="num">59</div>
            <img class="imgs" src="../../assets/img/lvjinatou.png" alt="" />
          </div>
        </div>
        <!-- 授信用户量 -->
        <div class="jishuBox">
          <div class="jishuBox_text">授信用户量</div>
          <div class="configBox">
            <dv-digital-flop
              :config="config4"
              style="width: 100%; height: 0.725rem"
            />
          </div>
          <div class="jishuBox_1">
            <div>较上日</div>
            <div class="num">16</div>
            <img class="imgs" src="../../assets/img/arrowup.png" alt="" />
          </div>
        </div>
        <!-- 放款用户量 -->
        <div class="jishuBox">
          <div class="jishuBox_text">放款用户量</div>
          <div class="configBox">
            <dv-digital-flop
              :config="config5"
              style="width: 100%; height: 0.725rem"
            />
          </div>
          <div class="jishuBox_1">
            <div>较上日</div>
            <div class="num">15</div>
            <img class="imgs" src="../../assets/img/arrowup.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import {} from '';

export default {
  name: "",
  data() {
    return {
      config: null,
      config2: null,
      config3: null,
      config4: null,
      config5: null,
      fontSize1: 20, //字体
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.widthA();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.configA();
  },
  //方法集合
  methods: {
    // 翻牌器文字随着屏幕的大小变化
    widthA() {
      var width = window.innerWidth;
      // 最小1366px，最大适配2560px
      if (width <= 1366) {
        this.fontSize1 = 20;
      } else if (1366 < width && width < 1681) {
        this.fontSize1 = 25;
      } else if (1680 < width && width < 1921) {
        this.fontSize1 = 30;
      } else if (1920 < width && width < 2561) {
        this.fontSize1 = 35;
      }
    },
    configA() {
      this.config = {
        number: [13258],
        content: "{nt}",
        style: {
          fontSize: this.fontSize1,
          fill: "#F6D69B",
        },
      };
      this.config2 = {
        number: [83026],
        content: "{nt}",
        style: {
          fontSize: this.fontSize1,
          fill: "#F6D69B",
        },
      };
      this.config3 = {
        number: [2308],
        content: "{nt}",
        style: {
          fontSize: this.fontSize1,
          fill: "#F6D69B",
        },
      };
      this.config4 = {
        number: [286],
        content: "{nt}",
        style: {
          fontSize: this.fontSize1,
          fill: "#F6D69B",
        },
      };
      this.config5 = {
        number: [283],
        content: "{nt}",
        style: {
          fontSize: this.fontSize1,
          fill: "#F6D69B",
        },
      };
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.div1 {
  position: relative;
  width: 100%;
  height: 100%;
  // padding-top: 0.1rem;
}
// .toptime {
//   position: absolute;
//   top: -0.5rem;
//   right: 0.5rem;
//   opacity: 0.71;
//   font-family: Helvetica;
//   font-size: 0.15rem;
//   color: #ffffff;
//   letter-spacing: 0;
// }
.UpperMiddle {
  position: absolute;
  top: -0.25rem;
  width: 100%;
  height: 100%;
  // background: url("../../assets/img/bianzu5.png") no-repeat;
  background-size: 100% 100%;
}
.UpperMiddleBox {
  width: 100%;
  height: 100%;
  // padding: 0.5rem;
  display: flex;
  align-items: center;
}
.jishuBox {
  // border: 1px solid #fff;
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  // padding: 0.1rem;
}
.jishuBox_text {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC-Regular;
  font-size: 0.225rem;
  line-height: 0.3125rem;
  color: #ffffff;
  letter-spacing: 0.03rem;
  text-align: center;
}
.configBox {
  // border: 1px solid rgb(235, 111, 111);
  flex: 1;
  width: 100%;
}
.jishuBox_1 {
  // border: 1px solid rgb(248, 106, 106);
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  // opacity: 0.72;
  font-family: PingFangSC-Regular;
  font-size: 0.16rem;
  line-height: 0.4rem;
  color: #ffffff;
  letter-spacing: 0;
  > :nth-child(1) {
    opacity: 0.72;
  }
  .num {
    margin: 0 4px;
    font-size: 0.3rem;
    color: rgb(248, 106, 106);
  }
  .imgs {
    width: 0.3rem;
    height: 0.3rem;
  }
}
</style>
